<template>
    <div class="app-container">
        <el-card>
            <template #header>
                <div>
                    <span>产品信息展示</span>
                </div>
            </template>
            <el-row justify="center">
                <el-col :span="20">
                    <el-row>
                        <el-col :span="6" v-for="product in productList" :key="product.productId">
                            <ProductImageInformation :product-information="product" />
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { listProduct } from '@/api/product';
import ProductImageInformation from '@/components/ProductImageInformation.vue';

interface Product {
    productId: number;
    productName: string;
    productDescription: string;
    price: number;
    imageUrl: string;
}

const productList = ref<Product[]>([]);

onMounted(() => {
    getPhoneList();
});

function getPhoneList() {
    const queryParams = {
        productCategoryId: 3
    };
    listProduct(queryParams).then(response => {
        productList.value = response.data;
    });
}
</script>

<style scoped>
.app-container {
    padding: 20px;
}
</style>